// 调控指数
import React , {useImperativeHandle, useState}from 'react'
import {Modal, Button, Table} from 'antd'
import { useTranslation } from "react-i18next";
import {RegulationDataList} from './regulationDataList'
import { RegulationTask } from './regulationTask';
import {RegulationControl} from './regulationControl'
import LoadingIcon from '../../../../assets/images/dapp/loading.png'
import WaitingIcon from '../../../../assets/images/dapp/waitingIcon.svg'

export const RegulationModal = React.forwardRef(({}, ref) => {
    const { t } = useTranslation();
    const [open, setOpen] = useState(false);
    const [step, setStep] = useState(1);
    useImperativeHandle(ref, () => ({
        open: () => {
            return handleOpen();
        }
    }));
   
    const handleOpen = () => {
        setOpen(true);
    }

    const handleClose = () => {
        setOpen(false);
    }

    const handleNext = () => {
        setStep(step + 1);
    }

    const handleControl = () => {

    }
    return (
        <Modal open={open} footer={null} title={t('dappIndexRegulation.regulation')} className="regulation-modal" width="1160px" onCancel={() => handleClose()} style={{top: 84}}>
            <div className='regulation-control-body'>
                {
                    step == 1 ? <RegulationDataList /> : step == 2 ? <RegulationTask /> : <RegulationControl />
                }
                <div className='footer-row'>
                    {
                        step != 1 ?
                        <Button className='prev-btn' onClick={() => setStep(step - 1)}>{t("dappIndexRegulation.preSetp")}</Button>: null
                    }
                    {
                        step != 3 ?<Button className='next-btn' onClick={() => handleNext()}>
                        {t("dappIndexRegulation.next")}
                    </Button>:
                    <Button className='next-btn' onClick={() => handleControl()} >
                    {t("dappIndexRegulation.control")}
                </Button>
                    }
                    {
                        step == 3 ?
                        <div className='team-info'>
                        <img src={WaitingIcon}></img>
                        <span className='team-label'>{t("dappIndexRegulation.teamLabel")}</span>
                        <span className='value'>7</span>
                    </div>: null
                    }
                   
                </div>
            </div>

        </Modal>
    )
})
